<template>
  <div class="header-box" >
    <span @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </span>
    <div class="right-content-header">
      <div>app二维码</div>
      <div>
        <img src="../assets/logo.png" alt class="userimg" />
        <span>admin</span>
        <a-dropdown>
          <a-icon type="caret-down" style="margin-left:5px" @click="e => e.preventDefault()" />
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1">
              个人信息
            </a-menu-item>
            <a-menu-item key="2">
              修改密码
            </a-menu-item>
            <a-menu-item key="3">
              退出账号
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../components/bus.js'
export default {
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    toggleCollapsed() {      
      this.collapsed = !this.collapsed;
      bus.$emit('bindstr',this.collapsed)
    },
    handleMenuClick(e) {
      console.log('click', e);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-box {
  padding: 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right-content-header {
    display: flex;
  }
}
.userimg {
  width: 50px;
  height: 50px;
}
</style>